/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    display: inline-flex;
}

.spectrum-Badge {
    --spectrum-badge-border-width: var(--spectrum-border-width-200);
    --spectrum-badge-border-color: transparent;
    --spectrum-badge-line-height: var(--spectrum-line-height-100);
    --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
    --spectrum-badge-font-weight: var(--spectrum-medium-font-weight);
    --spectrum-badge-label-icon-color: var(--spectrum-white);
    --spectrum-badge-background-color-default: var(
        --spectrum-neutral-subdued-background-color-default
    );
    --spectrum-badge-background-color-accent: var(
        --spectrum-accent-background-color-default
    );
    --spectrum-badge-background-color-informative: var(
        --spectrum-informative-background-color-default
    );
    --spectrum-badge-background-color-negative: var(
        --spectrum-negative-background-color-default
    );
    --spectrum-badge-background-color-positive: var(
        --spectrum-positive-background-color-default
    );
    --spectrum-badge-background-color-notice: var(
        --spectrum-notice-background-color-default
    );
    --spectrum-badge-background-color-gray: var(
        --spectrum-gray-background-color-default
    );
    --spectrum-badge-background-color-red: var(
        --spectrum-red-background-color-default
    );
    --spectrum-badge-background-color-orange: var(
        --spectrum-orange-background-color-default
    );
    --spectrum-badge-background-color-yellow: var(
        --spectrum-yellow-background-color-default
    );
    --spectrum-badge-background-color-chartreuse: var(
        --spectrum-chartreuse-background-color-default
    );
    --spectrum-badge-background-color-celery: var(
        --spectrum-celery-background-color-default
    );
    --spectrum-badge-background-color-green: var(
        --spectrum-green-background-color-default
    );
    --spectrum-badge-background-color-seafoam: var(
        --spectrum-seafoam-background-color-default
    );
    --spectrum-badge-background-color-cyan: var(
        --spectrum-cyan-background-color-default
    );
    --spectrum-badge-background-color-blue: var(
        --spectrum-blue-background-color-default
    );
    --spectrum-badge-background-color-indigo: var(
        --spectrum-indigo-background-color-default
    );
    --spectrum-badge-background-color-purple: var(
        --spectrum-purple-background-color-default
    );
    --spectrum-badge-background-color-fuchsia: var(
        --spectrum-fuchsia-background-color-default
    );
    --spectrum-badge-background-color-magenta: var(
        --spectrum-magenta-background-color-default
    );
    --spectrum-badge-background-color-pink: var(
        --spectrum-pink-background-color-default
    );
    --spectrum-badge-background-color-turquoise: var(
        --spectrum-turquoise-background-color-default
    );
    --spectrum-badge-background-color-brown: var(
        --spectrum-brown-background-color-default
    );
    --spectrum-badge-background-color-cinnamon: var(
        --spectrum-cinnamon-background-color-default
    );
    --spectrum-badge-background-color-silver: var(
        --spectrum-silver-background-color-default
    );
    --spectrum-badge-subtle-label-icon-color: var(--spectrum-gray-1000);
    --spectrum-badge-subtle-background-color-default: var(
        --spectrum-neutral-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-accent: var(
        --spectrum-accent-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-informative: var(
        --spectrum-informative-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-negative: var(
        --spectrum-negative-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-positive: var(
        --spectrum-positive-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-notice: var(
        --spectrum-notice-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-gray: var(
        --spectrum-gray-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-red: var(
        --spectrum-red-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-orange: var(
        --spectrum-orange-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-yellow: var(
        --spectrum-yellow-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-chartreuse: var(
        --spectrum-chartreuse-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-celery: var(
        --spectrum-celery-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-green: var(
        --spectrum-green-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-seafoam: var(
        --spectrum-seafoam-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-cyan: var(
        --spectrum-cyan-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-blue: var(
        --spectrum-blue-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-indigo: var(
        --spectrum-indigo-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-purple: var(
        --spectrum-purple-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-fuchsia: var(
        --spectrum-fuchsia-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-magenta: var(
        --spectrum-magenta-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-pink: var(
        --spectrum-pink-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-turquoise: var(
        --spectrum-turquoise-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-brown: var(
        --spectrum-brown-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-cinnamon: var(
        --spectrum-cinnamon-subtle-background-color-default
    );
    --spectrum-badge-subtle-background-color-silver: var(
        --spectrum-silver-subtle-background-color-default
    );
    --spectrum-badge-outline-label-icon-color: var(--spectrum-gray-1000);
    --spectrum-badge-outline-background-color: var(
        --spectrum-background-layer-2-color
    );
    --spectrum-badge-outline-border-color-neutral: var(
        --spectrum-neutral-visual-color
    );
    --spectrum-badge-outline-border-color-accent: var(
        --spectrum-accent-visual-color
    );
    --spectrum-badge-outline-border-color-informative: var(
        --spectrum-informative-visual-color
    );
    --spectrum-badge-outline-border-color-negative: var(
        --spectrum-negative-visual-color
    );
    --spectrum-badge-outline-border-color-notice: var(
        --spectrum-notice-visual-color
    );
    --spectrum-badge-outline-border-color-positive: var(
        --spectrum-positive-visual-color
    );
    --spectrum-badge-corner-radius: var(
        --spectrum-corner-radius-medium-size-medium
    );
    --spectrum-badge-height: var(--spectrum-component-height-100);
    --spectrum-badge-font-size: var(--spectrum-font-size-100);
    --spectrum-badge-label-spacing-vertical-top: var(
        --spectrum-component-top-to-text-100
    );
    --spectrum-badge-label-spacing-vertical-bottom: var(
        --spectrum-component-bottom-to-text-100
    );
    --spectrum-badge-label-spacing-horizontal: var(
        --spectrum-component-edge-to-text-100
    );
    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100);
    --spectrum-badge-icon-spacing-horizontal: var(
        --spectrum-component-edge-to-visual-100
    );
    --spectrum-badge-icon-spacing-vertical-top: var(
        --spectrum-component-top-to-workflow-icon-100
    );
    --spectrum-badge-icon-only-spacing-horizontal: var(
        --spectrum-component-edge-to-visual-only-100
    );
    --highcontrast-badge-border-color: CanvasText;
}

.spectrum-Badge--celery,
.spectrum-Badge--chartreuse,
.spectrum-Badge--notice,
.spectrum-Badge--orange,
.spectrum-Badge--yellow {
    --spectrum-badge-label-icon-color: var(--spectrum-black);
}

.spectrum-Badge--sizeS {
    --spectrum-badge-corner-radius: var(
        --spectrum-corner-radius-medium-size-small
    );
    --spectrum-badge-height: var(--spectrum-component-height-75);
    --spectrum-badge-font-size: var(--spectrum-font-size-75);
    --spectrum-badge-label-spacing-vertical-top: var(
        --spectrum-component-top-to-text-75
    );
    --spectrum-badge-label-spacing-vertical-bottom: var(
        --spectrum-component-bottom-to-text-75
    );
    --spectrum-badge-label-spacing-horizontal: var(
        --spectrum-component-edge-to-text-75
    );
    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75);
    --spectrum-badge-icon-spacing-horizontal: var(
        --spectrum-component-edge-to-visual-75
    );
    --spectrum-badge-icon-spacing-vertical-top: var(
        --spectrum-component-top-to-workflow-icon-75
    );
    --spectrum-badge-icon-only-spacing-horizontal: var(
        --spectrum-component-edge-to-visual-only-75
    );
}

.spectrum-Badge--sizeL {
    --spectrum-badge-corner-radius: var(
        --spectrum-corner-radius-medium-size-large
    );
    --spectrum-badge-height: var(--spectrum-component-height-100);
    --spectrum-badge-font-size: var(--spectrum-font-size-200);
    --spectrum-badge-label-spacing-vertical-top: var(
        --spectrum-component-top-to-text-200
    );
    --spectrum-badge-label-spacing-vertical-bottom: var(
        --spectrum-component-bottom-to-text-200
    );
    --spectrum-badge-label-spacing-horizontal: var(
        --spectrum-component-edge-to-text-200
    );
    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200);
    --spectrum-badge-icon-spacing-horizontal: var(
        --spectrum-component-edge-to-visual-200
    );
    --spectrum-badge-icon-spacing-vertical-top: var(
        --spectrum-component-top-to-workflow-icon-200
    );
    --spectrum-badge-icon-only-spacing-horizontal: var(
        --spectrum-component-edge-to-visual-only-200
    );
}

.spectrum-Badge--sizeXL {
    --spectrum-badge-corner-radius: var(
        --spectrum-corner-radius-medium-size-extra-large
    );
    --spectrum-badge-height: var(--spectrum-component-height-100);
    --spectrum-badge-font-size: var(--spectrum-font-size-300);
    --spectrum-badge-label-spacing-vertical-top: var(
        --spectrum-component-top-to-text-300
    );
    --spectrum-badge-label-spacing-vertical-bottom: var(
        --spectrum-component-bottom-to-text-300
    );
    --spectrum-badge-label-spacing-horizontal: var(
        --spectrum-component-edge-to-text-300
    );
    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300);
    --spectrum-badge-icon-spacing-horizontal: var(
        --spectrum-component-edge-to-visual-300
    );
    --spectrum-badge-icon-spacing-vertical-top: var(
        --spectrum-component-top-to-workflow-icon-300
    );
    --spectrum-badge-icon-only-spacing-horizontal: var(
        --spectrum-component-edge-to-visual-only-300
    );
}

@media (forced-colors: active) {
    .spectrum-Badge {
        border-color: var(--highcontrast-badge-border-color);
    }
}

.spectrum-Badge {
    min-block-size: var(--spectrum-badge-height);
    inline-size: auto;
    display: inline-flex;
    vertical-align: middle;
    position: relative;
    cursor: default;
    border: var(--spectrum-badge-border-width) solid
        var(--spectrum-badge-border-color);
    border-radius: var(--spectrum-badge-corner-radius);
    background: var(--spectrum-badge-background-color-default);
    color: var(--spectrum-badge-label-icon-color);
    background-origin: border-box;
    align-self: start;
}

.spectrum-Badge--neutral {
    background: var(--spectrum-badge-background-color-default);
}

.spectrum-Badge--accent {
    background: var(--spectrum-badge-background-color-accent);
}

.spectrum-Badge--informative {
    background: var(--spectrum-badge-background-color-informative);
}

.spectrum-Badge--negative {
    background: var(--spectrum-badge-background-color-negative);
}

.spectrum-Badge--positive {
    background: var(--spectrum-badge-background-color-positive);
}

.spectrum-Badge--notice {
    background: var(--spectrum-badge-background-color-notice);
}

.spectrum-Badge--gray {
    background: var(--spectrum-badge-background-color-gray);
}

.spectrum-Badge--red {
    background: var(--spectrum-badge-background-color-red);
}

.spectrum-Badge--orange {
    background: var(--spectrum-badge-background-color-orange);
}

.spectrum-Badge--yellow {
    background: var(--spectrum-badge-background-color-yellow);
}

.spectrum-Badge--chartreuse {
    background: var(--spectrum-badge-background-color-chartreuse);
}

.spectrum-Badge--celery {
    background: var(--spectrum-badge-background-color-celery);
}

.spectrum-Badge--green {
    background: var(--spectrum-badge-background-color-green);
}

.spectrum-Badge--seafoam {
    background: var(--spectrum-badge-background-color-seafoam);
}

.spectrum-Badge--cyan {
    background: var(--spectrum-badge-background-color-cyan);
}

.spectrum-Badge--blue {
    background: var(--spectrum-badge-background-color-blue);
}

.spectrum-Badge--indigo {
    background: var(--spectrum-badge-background-color-indigo);
}

.spectrum-Badge--purple {
    background: var(--spectrum-badge-background-color-purple);
}

.spectrum-Badge--fuchsia {
    background: var(--spectrum-badge-background-color-fuchsia);
}

.spectrum-Badge--magenta {
    background: var(--spectrum-badge-background-color-magenta);
}

.spectrum-Badge--pink {
    background: var(--spectrum-badge-background-color-pink);
}

.spectrum-Badge--turquoise {
    background: var(--spectrum-badge-background-color-turquoise);
}

.spectrum-Badge--brown {
    background: var(--spectrum-badge-background-color-brown);
}

.spectrum-Badge--cinnamon {
    background: var(--spectrum-badge-background-color-cinnamon);
}

.spectrum-Badge--silver {
    background: var(--spectrum-badge-background-color-silver);
}

.spectrum-Badge--subtle {
    color: var(--spectrum-badge-subtle-label-icon-color);
}

.spectrum-Badge--subtle.spectrum-Badge--neutral {
    background: var(--spectrum-badge-subtle-background-color-default);
}

.spectrum-Badge--subtle.spectrum-Badge--accent {
    background: var(--spectrum-badge-subtle-background-color-accent);
}

.spectrum-Badge--subtle.spectrum-Badge--informative {
    background: var(--spectrum-badge-subtle-background-color-informative);
}

.spectrum-Badge--subtle.spectrum-Badge--negative {
    background: var(--spectrum-badge-subtle-background-color-negative);
}

.spectrum-Badge--subtle.spectrum-Badge--positive {
    background: var(--spectrum-badge-subtle-background-color-positive);
}

.spectrum-Badge--subtle.spectrum-Badge--notice {
    background: var(--spectrum-badge-subtle-background-color-notice);
}

.spectrum-Badge--subtle.spectrum-Badge--gray {
    background: var(--spectrum-badge-subtle-background-color-gray);
}

.spectrum-Badge--subtle.spectrum-Badge--red {
    background: var(--spectrum-badge-subtle-background-color-red);
}

.spectrum-Badge--subtle.spectrum-Badge--orange {
    background: var(--spectrum-badge-subtle-background-color-orange);
}

.spectrum-Badge--subtle.spectrum-Badge--yellow {
    background: var(--spectrum-badge-subtle-background-color-yellow);
}

.spectrum-Badge--subtle.spectrum-Badge--chartreuse {
    background: var(--spectrum-badge-subtle-background-color-chartreuse);
}

.spectrum-Badge--subtle.spectrum-Badge--celery {
    background: var(--spectrum-badge-subtle-background-color-celery);
}

.spectrum-Badge--subtle.spectrum-Badge--green {
    background: var(--spectrum-badge-subtle-background-color-green);
}

.spectrum-Badge--subtle.spectrum-Badge--seafoam {
    background: var(--spectrum-badge-subtle-background-color-seafoam);
}

.spectrum-Badge--subtle.spectrum-Badge--cyan {
    background: var(--spectrum-badge-subtle-background-color-cyan);
}

.spectrum-Badge--subtle.spectrum-Badge--blue {
    background: var(--spectrum-badge-subtle-background-color-blue);
}

.spectrum-Badge--subtle.spectrum-Badge--indigo {
    background: var(--spectrum-badge-subtle-background-color-indigo);
}

.spectrum-Badge--subtle.spectrum-Badge--purple {
    background: var(--spectrum-badge-subtle-background-color-purple);
}

.spectrum-Badge--subtle.spectrum-Badge--fuchsia {
    background: var(--spectrum-badge-subtle-background-color-fuchsia);
}

.spectrum-Badge--subtle.spectrum-Badge--magenta {
    background: var(--spectrum-badge-subtle-background-color-magenta);
}

.spectrum-Badge--subtle.spectrum-Badge--pink {
    background: var(--spectrum-badge-subtle-background-color-pink);
}

.spectrum-Badge--subtle.spectrum-Badge--turquoise {
    background: var(--spectrum-badge-subtle-background-color-turquoise);
}

.spectrum-Badge--subtle.spectrum-Badge--brown {
    background: var(--spectrum-badge-subtle-background-color-brown);
}

.spectrum-Badge--subtle.spectrum-Badge--cinnamon {
    background: var(--spectrum-badge-subtle-background-color-cinnamon);
}

.spectrum-Badge--subtle.spectrum-Badge--silver {
    background: var(--spectrum-badge-subtle-background-color-silver);
}

.spectrum-Badge--outline:is(
        .spectrum-Badge--neutral,
        .spectrum-Badge--accent,
        .spectrum-Badge--informative,
        .spectrum-Badge--negative,
        .spectrum-Badge--positive,
        .spectrum-Badge--notice
    ) {
    background: var(--spectrum-badge-outline-background-color);
    color: var(--spectrum-badge-outline-label-icon-color);
}

.spectrum-Badge--outline.spectrum-Badge--neutral {
    border-color: var(--spectrum-badge-outline-border-color-neutral);
}

.spectrum-Badge--outline.spectrum-Badge--accent {
    border-color: var(--spectrum-badge-outline-border-color-accent);
}

.spectrum-Badge--outline.spectrum-Badge--informative {
    border-color: var(--spectrum-badge-outline-border-color-informative);
}

.spectrum-Badge--outline.spectrum-Badge--negative {
    border-color: var(--spectrum-badge-outline-border-color-negative);
}

.spectrum-Badge--outline.spectrum-Badge--positive {
    border-color: var(--spectrum-badge-outline-border-color-positive);
}

.spectrum-Badge--outline.spectrum-Badge--notice {
    border-color: var(--spectrum-badge-outline-border-color-notice);
}

.spectrum-Badge--fixed-inline-start {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.spectrum-Badge--fixed-inline-end {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.spectrum-Badge--fixed-block-start {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.spectrum-Badge--fixed-block-end {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.spectrum-Badge-label {
    font-size: var(--spectrum-badge-font-size);
    font-weight: var(--spectrum-badge-font-weight);
    line-height: var(--spectrum-badge-line-height);
    padding-inline-end: calc(
        var(--spectrum-badge-label-spacing-horizontal) -
            var(--spectrum-badge-border-width)
    );
    padding-inline-start: var(--spectrum-badge-label-spacing-horizontal);
    padding-block-start: calc(
        var(--spectrum-badge-label-spacing-vertical-top) -
            var(--spectrum-badge-border-width)
    );
    padding-block-end: calc(
        var(--spectrum-badge-label-spacing-vertical-bottom) -
            var(--spectrum-badge-border-width)
    );
}

.spectrum-Badge-label:lang(ja),
.spectrum-Badge-label:lang(ko),
.spectrum-Badge-label:lang(zh) {
    line-height: var(--spectrum-badge-line-height-cjk);
}

.spectrum-Badge-icon + .spectrum-Badge-label {
    padding-inline-start: 0;
}

.spectrum-Badge-icon {
    block-size: var(--spectrum-badge-workflow-icon-size);
    inline-size: var(--spectrum-badge-workflow-icon-size);
    flex: 0 0 var(--spectrum-badge-workflow-icon-size);
    margin-inline-start: calc(
        var(--spectrum-badge-icon-spacing-horizontal) -
            var(--spectrum-badge-border-width)
    );
    margin-inline-end: var(--spectrum-badge-icon-text-spacing);
    margin-block-start: calc(
        var(--spectrum-badge-icon-spacing-vertical-top) -
            var(--spectrum-badge-border-width)
    );
    margin-block-end: calc(
        var(--spectrum-badge-icon-spacing-vertical-top) -
            var(--spectrum-badge-border-width)
    );
}

.spectrum-Badge-icon--no-label {
    margin-inline-start: calc(
        var(--spectrum-badge-icon-only-spacing-horizontal) -
            var(--spectrum-badge-border-width)
    );
    margin-inline-end: calc(
        var(--spectrum-badge-icon-only-spacing-horizontal) -
            var(--spectrum-badge-border-width)
    );
}

.spectrum-Badge,
.spectrum-Badge-icon,
.spectrum-Badge-label {
    box-sizing: border-box;
}
